<template>
	<view class='cart-list-item'>
		<!-- <view class='item-icon'>
	    <w-check-icon bindtap='onCheckClick' data-index="{{index}}" isChecked="{{goods.checked}}"/>
	  </view> -->
		<view class='item-img'>
			<image :src="'https://guanli.rgzx.site/assets/uploadimage/'+position.pcPicture" mode='aspectFill' />
		</view>
		<view class="item-info">
			<view class='title'>{{position.pcName}}</view>
			<view class='desc'>{{position.introduction}}</view>
			<!-- <view class='price-count'> -->
			<!-- <view class='price'>¥goods.price</view> -->
			<view class="job">
				<view class="job_item" v-for="(item,index) in quota" :key="index">{{item.pName}}
					<view style="color: #35C552;">{{item.current}}</view>/<view>{{item.total}}</view>人
				</view>
				<!-- <view class="job_item">UI
					<view style="color: #35C552;">1</view>/<view>12</view>人
				</view>
				<view class="job_item">后端
					<view style="color: #35C552;">1</view>/<view>12</view>人
				</view>
				<view class="job_item">后端
					<view style="color: #35C552;">1</view>/<view>12</view>人
				</view> -->
			</view>
			<!-- </view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			position: Object,
			quota: Array
		},
		data() {
			return {
				// pcName: this.proclassDataItem.pcName
			}
		},
		methods: {
			// getData(){
			// 	console.log(this.pcName)
			// }
		},


	}
</script>

<style>
	.cart-list-item {
		display: flex;
		padding: 10rpx;
		align-items: center;
		border: 1px solid #eee;
	}

	.item-icon {
		width: 60rpx;
	}

	.item-img {
		width: 230rpx;
	}

	.item-img image {
		width: 230rpx;
		height: 190rpx;
		border-radius: 16rpx;
	}

	.item-info {
		margin: 5rpx 15rpx 5rpx;
		flex: 1;
		width: 150rpx;
	}

	.item-info .title {
		height: 44rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}


	.job_item {
		padding: 5rpx;
		background-color: rgba(78, 78, 78, 0.1);

		display: flex;
		margin-right: 15rpx;
		/* flex: 1; */

	}

	.desc {
		height: 70rpx;
		/* font-size: 28rpx;
		margin-top: 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: -webkit-box;
		-webkit-line-clamp: 3; /*行数*/
		/* word-break: break-all; */
		font-size: 28rpx;
		margin-top: 10rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		width: auto;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		/*行数*/
		overflow: hidden;
	}

	 .job {
		margin-top: 12rpx;
		height: 34rpx;
		align-items: center;
		display: flex;

		white-space:nowrap;
		text-overflow:hidden;
		text-overflow:ellipsis;
		font-size: 28rpx;
		color: #357DC5;
	}

	.price-count {
		display: flex;
		margin-top: 40rpx;
		justify-content: space-between;
	}

	.price {
		color: #ff5777;
		font-size: 40rpx;
	}
</style>
